<template>
	<MainPage>
		<template #HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="70px"
			>
				<el-form-item label="用户" prop="uid">
					<change-user-input
						ref="changeUserInput"
						@sendValue="(data) => getData(data, 1)"
						@clear="clear(1)"
					></change-user-input>
				</el-form-item>

				<el-form-item label="类型" prop="type">
					<el-select v-model.trim="form.type" placeholder="类型" class="wid220">
						<el-option label="所有" value=""></el-option>
						<el-option
							v-for="(item, index) in type_list"
							:label="item"
							:value="index"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-select
						v-model.trim="form.status"
						placeholder="状态"
						class="wid220"
					>
						<el-option label="所有" value=""></el-option>
						<el-option
							v-for="(item, index) in status_list"
							:label="item"
							:value="Number(index) + 1"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>

				<div class="more el-form-item" @click="moredata = !moredata">
					<span>更多</span>
					<i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
				</div>
				<div class="clearfix"></div>
				<el-collapse-transition>
					<div v-if="moredata">
						<div>
							<el-form-item label="日期" prop="send_time">
								<el-date-picker
									v-model="send_time"
									type="daterange"
									class="time220"
									:editable="false"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									value-format="yyyy-MM-dd"
									:clearable="false"
								/>
							</el-form-item>
							<el-form-item label="司机" prop="driver_id">
								<el-select
									v-model.trim="form.driver_id"
									placeholder="司机"
									class="wid220"
								>
									<el-option label="所有" value=""></el-option>
									<el-option
										v-for="(item, index) in driver"
										:label="item"
										:value="index"
										:key="index"
									></el-option>
								</el-select>
							</el-form-item>

							<el-form-item label="物品" prop="goods_spu_id">
								<change-goods-input
									ref="changeGoodsRef"
									url="2"
									@clear="clear(2)"
									@sendValue="(data) => getData(data, 2)"
								></change-goods-input>
							</el-form-item>
						</div>
					</div>
				</el-collapse-transition>
				<el-form-item>
					<el-button class="reset marginLeft10" type="primary" @click="reset"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</template>
		<template #HeaderRight>
			<el-button @click="returnDialogVisible = true"> 物品归还 </el-button>
			<el-button @click="lendDialogVisible = true"> 物品借出 </el-button>
		</template>
		<template #Table>
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
			>
				<el-table-column label="序号" width="60" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column
					label="单号"
					prop="order_sn"
					:show-overflow-tooltip="true"
					min-width="140"
				/>
				<el-table-column
					label="类型"
					prop="nickname"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<span :class="'type' + scope.row.type">{{
							type_list[scope.row.type]
						}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="用户名称"
					prop="uid"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						{{ scope.row.member.nickname }}
					</template>
				</el-table-column>
				<el-table-column
					label="状态"
					prop="nickname"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<span :class="'status' + scope.row.status">{{
							status_list[scope.row.status]
						}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="司机"
					prop="nickname"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="备注"
					prop="remark"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="提交时间"
					prop="nickname"
					:show-overflow-tooltip="true"
					min-width="140"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.submit_time) }}
					</template>
				</el-table-column>
				<el-table-column
					label="管理操作"
					prop="nickname"
					:show-overflow-tooltip="true"
					fixed="right"
					width="150"
				>
					<template slot-scope="scope">
						<router-link :to="'/warehouse/turnOverRecord/see/' + scope.row.id">
							<el-link type="primary">查看</el-link>
						</router-link>
						<el-link
							v-if="scope.row.status == 0"
							type="danger"
							@click="handleCheck(scope.row)"
							>审核</el-link
						>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template #Page>
			<el-pagination
				:current-page="current.page"
				:page-sizes="[20, 30, 50, 100]"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
				background
				@size-change="changeLimit"
				@current-change="changePage"
			/>
		</template>
		<template #Dialog>
			<record-lend
				:showDialog.sync="lendDialogVisible"
				@refresh="getArticleList"
			></record-lend>
			<record-return
				:showDialog.sync="returnDialogVisible"
				@refresh="getArticleList"
			></record-return>
			<record-check
				:showDialog.sync="checkDialogVisible"
				:id="checkId"
				@refresh="getArticleList"
			></record-check>
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import recordReturn from "./components/turnoverGoods/record_return.vue";
	import recordLend from "./components/turnoverGoods/record_lend.vue";
	import recordCheck from "./components/turnoverGoods/record_check.vue";
	import { turnoverOrder_index } from "@/api/warehouse/warehouseTurnOrder";
	import { parseTime } from "@/utils/index";
	export default {
		name: "",
		components: {
			MainPage,
			recordReturn,
			recordLend,
			recordCheck,
		},
		data() {
			return {
				parseTime,
				form: {
					uid: "",
					type: "",
					status: "",
					start_time: "",
					end_time: "",
					driver_id: "",
					goods_spu_id: "",
				},
				send_time: [],
				list: [],
				status_list: [],
				type_list: [],
				driver: [],
				listLoading: false,
				moredata: false,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				lendDialogVisible: false,
				returnDialogVisible: false,
				checkDialogVisible: false,
				checkId: "",
			};
		},
		methods: {
			getArticleList() {
				this.current.page = 1;
				this.turnoverOrder_index();
			},
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.$refs["changeUserInput"].name = "";
				if (this.$refs["changeGoodsRef"]) {
					this.$refs["changeGoodsRef"].name = "";
				}
				this.send_time = [];
				this.getArticleList();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.turnoverOrder_index();
			},
			changePage(page) {
				this.current.page = page;
				this.turnoverOrder_index();
			},
			getData(data, type) {
				if (type == 1) {
					this.form.uid = data.id;
				} else if (type == 2) {
					this.form.goods_spu_id = data.goods_spu_id;
				}
			},
			clear(type) {
				if (type == 1) {
					this.form.uid = "";
				} else if (type == 2) {
					this.form.goods_spu_id = "";
				}
			},
			turnoverOrder_index() {
				this.listLoading = true;
				let data = Object.assign(this.form, this.current);
				if (this.send_time) {
					data.start_time = this.send_time[0];
					data.end_time = this.send_time[1];
				}

				turnoverOrder_index(data).then((res) => {
					if (res.errcode == 0) {
						this.status_list = res.data.status_list;
						this.type_list = res.data.type_list;
						this.driver = res.data.driver;
						this.list = res.data.list.data;
						this.totalCount = res.data.list.total;
					} else {
					}
					this.listLoading = false;
				});
			},
			handleCheck(row) {
				this.checkId = row.id;
				this.checkDialogVisible = true;
			},
		},
		created() {
			this.turnoverOrder_index();
		},
	};
</script>
<style lang='scss' scoped>
.type1 {
	color: #f56c6c;
}
.type2 {
	color: #03a98e;
}

.status0 {
	color: #03a98e;
}
.status1 {
	color: #118ab2;
}
.status2 {
	color: #cccccc;
}
</style>
